export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      isRecording: false,
      activeInputId: null, // 当前聚焦的输入框ID
      keys: null
    }
  },
  methods: {
    handleFocus(id) {
      if(document.querySelectorAll('.cdPopup')[0]) {
        document.querySelectorAll('.cdPopup')[0].__vue__.keydNul()
      }
      this.activeInputId = id; // 设置当前聚焦的输入框ID
      this.keys = id
    },
    recording() {
      this.$refs.cdPopup.ClickPopup();
    },
    stopAudio() {
      console.log('转文字');
      this.stopAndUpload()
    },
    async stopAndUpload() {
      const audioBlob = await this.stopRecording();
      if (audioBlob) {
        this.uploadAudio(audioBlob);
      }
    },
    handleBlur() {
      console.log('失焦操作');
      // 使用setTimeout来处理快速切换焦点的情况
      setTimeout(() => {
        this.activeInputId = null;
        // this.stopAndUploadFun()
      }, 200);
    },
    async stopAndUploadFun() {
      this.stopRecording()
    },
    stopAudioFun(id) {
      // 切换当前输入框的microphoneShow状态
      if (this.activeInputId === id) {
        this.activeInputId = null;
      } else {
        this.activeInputId = id;
      }
    },
    isMicrophoneShow(id) {
      // 判断当前输入框是否显示microphone
      return this.activeInputId === id;
    },
    // handleClickOutside(event) {
    //   const isInput = event.target.classList.contains('el-input__inner');
    //   if (!isInput) {
    //     this.activeInputId = null;
    //   }
    // },
    // async getMicrophoneAccess() {
    //   try {
    //     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    //     this.mediaRecorder = new MediaRecorder(stream);
    //     this.mediaRecorder.ondataavailable = event => {
    //       this.audioChunks.push(event.data);
    //     };
    //   } catch (error) {
    //     console.error("Error accessing the microphone: ", error);
    //   }
    // },
    startRecording() {
      if (this.mediaRecorder) {
        this.audioChunks = [];
        this.mediaRecorder.start();
        this.isRecording = true;
      } else {
        console.log("MediaRecorder not initialized");
      }
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
        this.isRecording = false;
        return new Promise(resolve => {
          this.mediaRecorder.onstop = () => {
            const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
            resolve(audioBlob);
          };
        });
      }
    },
    async uploadAudio(audioBlob) {
      const formData = new FormData();
      formData.append("audioFile", audioBlob, "audio.wav");
      try {
        // const response = await fetch("YOUR_BACKEND_ENDPOINT", {
        //   method: "POST",
        //   body: formData,
        // });
        // const data = await response.json();
        // console.log("File upload success: ", data);
        console.log(formData);
        this.item.options.defaultValue = this.item.options.defaultValue + '你好'
      } catch (error) {
        console.error("File upload error: ", error);
      }
    },
    recognition(text) {
      this.item.options.defaultValue = this.item.options.defaultValue + text
    },
    keyFun(data) {
      this.keys = data
    }
  },
  mounted() {
    // this.getMicrophoneAccess();
    // 监听全局点击事件，用于处理点击非输入框区域的情况
    // document.addEventListener('click', (event) => {
    //   if (!event.target.classList.contains('el-input__inner') && !event.target.classList.contains('el-icon-microphone')) {
    //     this.activeInputId = null;
    //   }
    // });
  },
  beforeDestroy() {
    // document.removeEventListener('click', this.handleClickOutside);
  },
}